/*
 * @Author: shawnxiao
 * @Date: 2021-12-08 12:08:48
 * @LastEditTime: 2021-12-08 14:21:15
 * @FilePath: /vite-vue3-ts/src/views/Tsx/index.tsx
 */

import { defineComponent, ref } from 'vue'
import Child from './components/Child'

export default defineComponent({
  components: {
    Child
  },
  setup() {
    const count = ref(0);
    const handleAdd = () => {
      count.value++;
    };
    return () => <div style={{color:'#333'}}>
      <h1>this is parent</h1>
      {`Hello,tsx, ${count.value}`}
      <button onClick={handleAdd}>Add count</button>
      <p>parent count is:{count.value}</p>
      <Child
        style={{color:'#333'}}
        count={count.value}
        onChildClick={handleAdd}
      >
        {{
          header:() => <h3>slot header</h3>,
          default:() => <h3>default header</h3>
        }}
      </Child>
    </div>
  }
})
